import React, { useEffect, useState } from "react";
import { Button, Card, Form, Input, Table } from "antd";
import {
  SearchOutlined,
  EditOutlined,
  DeleteOutlined,
} from "@ant-design/icons";
import style from "./index.module.css";
import { getHospitalSetListRequire } from "@/api/hospital/hospitalSet";
import { getHospitalSetListRecordType } from "@/api/hospital/model/hospitalSetType";
import { paramsFileType } from "./indexType";

export default function HospitalSet() {
  //设置重新渲染页面
  const [isLoading,setIsLoading] =useState(true)
  //设置请求的数据
  const [hospitalData, setHospitalData] =
    useState<getHospitalSetListRecordType>([]);
  //设置当前页
  const [current, setCurrent] = useState(1);
  //每页条数
  const [limit, setLimit] = useState(4);
  //总条数
  const [total, setTotal] = useState(0);
  //设置params
  const [paramsFile,setParamsFile]=useState({})

  //页面一加载就请求数据
  useEffect(() => {
    const getHospitalSetList = async () => {
      const result = await getHospitalSetListRequire({
        page: current, //当前页数
        limit: limit, //每页条数
        ...paramsFile
      });
      // console.log(result.records);
      setHospitalData(result.records);
      setTotal(result.total)
    };
    getHospitalSetList();
  }, [current,limit,paramsFile,isLoading]);


  const columns = [
    {
      title: "序号",
      with: 60,
      dataIndex: "index",
      render(_: any, __: any, c: any) {
        return c + 1;
      },
    },
    {
      title: "医院名称",
      dataIndex: "hosname",
    },
    {
      title: "医院编号",
      dataIndex: "hoscode",
    },
    {
      title: "api基础路径",
      dataIndex: "apiUrl",
    },
    {
      title: "签名",
      dataIndex: "signKey",
    },
    {
      title: "联系人姓名",
      dataIndex: "contactsName",
    },
    {
      title: "联系人电话",
      dataIndex: "contactsPhone",
    },
    {
      title: "操作",
      dataIndex: "do",
      fixed: "right" as "right",
      with: 200,
      render() {
        return (
          <div>
            <Form.Item>
              <Button
                type="primary"
                className={style.doButtonLeft}
                icon={<EditOutlined />}
              ></Button>
              <Button type="primary" danger icon={<DeleteOutlined />}></Button>
            </Form.Item>
          </div>
        );
      },
    },
  ];

  //提交查询，获取params
  const getParamsFileHandle = (params:paramsFileType)=>{
    setParamsFile(params)    
  }
  //清空查询信息
  const clearSelectHandle =()=>{
    setParamsFile({})
  }


  return (
    <div className="hosSetOuter">
      <Card>
        <Form name="select" layout="inline" onFinish={getParamsFileHandle}>
          <Form.Item name="hosname">
            <Input placeholder="医院名称" />
          </Form.Item>
          <Form.Item name="hoscode">
            <Input placeholder="医院编号" />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
              查询
            </Button>
          </Form.Item>
          <Form.Item>
            <Button type="default" htmlType="reset" onClick={clearSelectHandle}>
              清空
            </Button>
          </Form.Item>
        </Form>
        <Form name="select" layout="inline" className={style.addList}>
          <Form.Item>
            <Button type="primary" htmlType="submit">
              添加
            </Button>
          </Form.Item>
          <Form.Item>
            <Button type="default" danger disabled>
              批量删除
            </Button>
          </Form.Item>
        </Form>
        <Table
          columns={columns}
          dataSource={hospitalData}
          rowKey={"hoscode"}
          scroll={{ x: 1200 }}
          bordered
          pagination={{
            // 当前页数
            current,
            // 每页条数
            pageSize: limit,
            // pageSizeOptions指定每页可以显示多少条
            pageSizeOptions: [4, 8, 12],
            // 是否展示 pageSize 切换器
            showSizeChanger: true,
            //是否可以快速跳转至某页
            showQuickJumper: true,
            //用于显示数据总量和当前数据顺序
            total,
            showTotal(total){
                return `一共${total}条`
            },
            // onChange方法实现翻页
            onChange(current:number,limit:number){
                setCurrent(current)
                setLimit(limit)         
            }
          }}
          
        />
        ;
      </Card>
    </div>
  );
}
